<script setup lang="ts">
defineOptions({
  name: "GAS_OPERATION_STATUS_VISUAL_ACIDDRUMEQUIP"
});

import { ref, computed, nextTick } from "vue";
import commonSearch from "@/views/common/components/commonSearch/index.vue";
import equipItem from "./components/equipItem.vue";
import { useSearchOption } from "../hooks";
import { useElementBounding } from "@vueuse/core";
import { queryGasAcidDrumEquipList } from "@/api/modules/operation";

const equipContentRef = ref<HTMLElement | null>(null);
const { height, width } = useElementBounding(equipContentRef);
const item_height = computed(() => Math.round((height.value - 17) / 2));
const item_width = computed(() => Math.floor((width.value - 16 * 5) / 6));
const item_height_str = computed(() => `${item_height.value}px`);
const item_width_str = computed(() => `${item_width.value}px`);

const commonSearchRef = ref<CommonSearch.SearchFormRefType>(null);
const searchLoading = ref<boolean>(false);
const loading = ref<boolean>(false);
// facCode   一期  FAC_83abf9   二期  FAC_93abf6
const facCode = localStorage.getItem("facCode");
const systemCode = facCode === "FAC_83abf9" ? "SC707B19" : facCode === "FAC_93abf6" ? "SCF3F30D" : "";
const searchOption = ref<Array<CommonSearch.SearchOption>>(useSearchOption(systemCode, 1));
let defaultParams: any = {};
const totalPage = ref<number>(0);
const currentParams = ref<Record<string, any>>({
  pageNum: 1,
  pageSize: 24
});

const list = ref<Array<any>>([]);

const handleSizeChange = async (val: number) => {
  currentParams.value.pageNum = 1;
  currentParams.value.pageSize = val;
  await updateData();
};

const handleCurrentChange = async (val: number) => {
  currentParams.value.pageNum = val;
  await updateData();
};

const updateData = async () => {
  list.value = [];
  const params = { ...defaultParams, ...currentParams.value };
  await init(params);
};

const submitSearchFormHandler = async (form: any) => {
  totalPage.value = 0;
  currentParams.value = { ...currentParams.value, ...form };
  await updateData();
};

const resetSearchFormHandler = async () => {
  currentParams.value = { pageNum: 1, pageSize: 24 };
  await updateData();
};

const formatData = (list: Array<any>): Array<any> => {
  if (list?.length) {
    return list.map(item => {
      if (!item?.changeListHistorList?.length) return item;
      const t = item.changeListHistorList?.reduce(
        (pre, cur) => {
          const { history, date, num } = cur;
          if (history) {
            pre.historyTime.push(cur);
          } else {
            pre.nextTime = date;
          }
          return pre;
        },
        { historyTime: [], nextTime: "" }
      );
      const { historyTime = [], nextTime = "" } = t;
      return { ...item, historyTime, nextTime };
    });
  } else {
    return [];
  }
};

const init = async (params: Record<string, any>) => {
  loading.value = true;
  const res = await queryGasAcidDrumEquipList(params, () => {
    loading.value = false;
  });
  if (!res) {
    loading.value = false;
    return;
  }
  const { total = 0, data = [] } = res;
  totalPage.value = total;
  list.value = formatData(data);
  await nextTick();
  loading.value = false;
};
</script>

<template>
  <div v-loading="searchLoading" class="special-gas-equip">
    <div class="equip-search">
      <commonSearch
        v-if="searchOption?.length"
        ref="commonSearchRef"
        v-model:loading="searchLoading"
        :row-num="4"
        :operation-span="3"
        :option="searchOption"
        @submit="submitSearchFormHandler"
        @reset="resetSearchFormHandler"
      />
    </div>
    <div ref="equipContentRef" v-loading="loading" class="equip-content">
      <px-scrollbar v-if="list?.length" :height="height">
        <div v-for="item in list" :key="item.id" class="equip-content-item">
          <equipItem :data="item" :height="item_height" />
        </div>
      </px-scrollbar>
      <div v-else class="equip-content-default">
        <px-empty class="px-empty-common" />
      </div>
    </div>
    <div class="equip-pagination">
      <px-pagination
        v-model:current-page="currentParams.pageNum"
        v-model:page-size="currentParams.pageSize"
        :page-sizes="[24, 48, 72]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.special-gas-equip {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  height: 100%;

  .equip-search {
    box-sizing: border-box;
    width: 100%;
    padding: 16px;
    background-color: #fff;
  }

  .equip-content {
    flex: 1;
    width: 100%;

    :deep(.px-scrollbar__view) {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;

      .equip-content-item {
        width: v-bind(item_width_str);
        height: v-bind(item_height_str);
        background-color: #fff;
      }
    }

    .equip-content-default {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100% !important;
    }
  }

  .equip-pagination {
    display: flex;
    justify-content: flex-end;
    width: 100%;
  }
}
</style>
